import React, { FC, useState } from 'react'
import { OrderInfo, OrderStdAdd, PriceInfo } from '@/types/orderList/orderDetail'
import { copyText } from '@/utils/domTool'
import { Toast } from 'antd-mobile'

const orderInfo: FC<{ priceInfo: Partial<PriceInfo>; orderInfo: OrderInfo }> = (props) => {
  const priceInfo = props.priceInfo
  const orderInfo = props.orderInfo
  return (
    <>
      <div className=" p-r1.2  pt-r2.0 h-r18.8 w-auto  bg-white  shadow-bs5 m-r1.2 rounded-r0.8">
        <div className=" w-full clear-both  text-gray-333333 text-r1.4 font-normal ">
          <span className=" float-left ">商品金额</span>
          <span className=" float-right font-semibold  font-SFProDisplay">
            ¥{priceInfo.originalPrice}
          </span>
        </div>
        <div className=" w-full clear-both  text-gray-333333 text-r1.4 font-normal pt-r1.3 ">
          <span className=" float-left ">奖学金</span>
          <span className=" float-right font-medium  text-red-FF3627">{priceInfo.couponPrice}</span>
        </div>
        <div className=" w-full clear-both  text-gray-333333 text-r1.4 font-normal pt-r1.3  overflow-hidden">
          <span className=" float-left ">礼品卡</span>
          <span className=" float-right font-medium  text-red-FF3627">
            {priceInfo.prepaidCardPrice}
          </span>
        </div>
        <div className=" clear-both  border border-white-F3F3F4  scale-y-50 mt-r1.3 mb-r1.3 "></div>
        <div className=" clear-both overflow-hidden ">
          <span className=" float-right font-regular text-gray-333333 text-r1.2 font-normal">
            实付款：
            <span className="  text-r2.0  font-SFProDisplay  text-red-FF3627">
              ¥{priceInfo.realPrice}
            </span>
          </span>
        </div>
      </div>
      <div className=" h-auto p-r1.2  pt-r1.6 w-auto  bg-white  shadow-bs5 m-r1.2 rounded-r0.8  text-gray-999999">
        <div className=" mb-r0.5">
          <span>订单编号：</span> <span className="text-gray-333333">{orderInfo.orderNum}</span>{' '}
          <span
            className=" inline-block ml-r1.0 w-r4.0 h-r1.8 leading-r1.8 font-normal font-regular rounded-r0.9 border border-gray-D6D6D6 text-center text-gray-333333 text-r1.2"
            onClick={() => {
              copyText(orderInfo.orderNum)
              Toast.show({
                content: '已复制',
              })
            }}
          >
            复制
          </span>
        </div>
        <div className=" mb-r0.5">
          <span>下单时间：</span> <span className="text-gray-333333">{orderInfo.createTime}</span>
        </div>
        {orderInfo.payTypeName ? (
          <div>
            <span>支付方式：</span>{' '}
            <span className="text-gray-333333">{orderInfo.payTypeName}</span>
          </div>
        ) : null}
      </div>
    </>
  )
}
export default orderInfo
